<template>
    <div>
        <el-input v-model="a"></el-input>
        <el-select v-model="op">
            <el-option value="+">+</el-option>
            <el-option value="-">-</el-option>
            <el-option value="*">*</el-option>
            <el-option value="/">/</el-option>
        </el-select>
        <el-input v-model="b"></el-input>
        <el-button type="primary" @click="cal">=</el-button>
        <el-input v-model="r"></el-input>
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        data() {
            return {
                a: '',
                op: '+',
                b: '',
                r: '',
            }
        },
        methods: {
            cal() {
                console.log(this.op)
                // this.r=parseFloat(this.a)+parseFloat(this.b)
                if (this.op === '+') {
                    this.r = parseFloat(this.a) + parseFloat(this.b)
                }
                else if (this.op === '-') {
                    this.r = parseFloat(this.a) - parseFloat(this.b)
                }
                else if (this.op === '*') {
                    this.r = parseFloat(this.a) * parseFloat(this.b)
                }
                else{
                    this.r = parseFloat(this.a) / parseFloat(this.b)
                }
            }
        }
    }
</script>

<style scoped>

</style>